<template>
	<view class="flex-row-space-between com-header" :class="{'com-hedaer-fixed': showIfFixedTabs}" id="header" :style="comHeaderHeightStyle">
		<i class="iconfont icon-fanhui"></i>
		<view class="flex-row-space-between actions">
			<i class="iconfont icon-dianpu"></i>
			<i class="iconfont icon-xihuan"></i>
			<i class="iconfont icon-shequhuodong"></i>
			<com-button-v1></com-button-v1>
			<i class="iconfont icon-gengduo"></i>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted } from 'vue';
import { statusBarHeight } from '../../utils/utils';
import { HEADER_HEIGHT } from '../../constant/constant';

defineProps({
	showIfFixedTabs: {
		type: Boolean
	}
})

const emit = defineEmits(['headerHeight'])

onMounted(() => {
	const instance = getCurrentInstance()
	const query = uni.createSelectorQuery().in(instance.proxy);
	query.select('#header').boundingClientRect((data: UniApp.NodeInfo) => {
		emit('headerHeight', data.height)
	}).exec()
})

const comHeaderHeightStyle = computed(() => `height: ${HEADER_HEIGHT}rpx;`)
</script>

<style lang="scss" scoped>
	@import '../../styles/variable.scss';
	.actions {
		width: 60vw;
	}
	.com-header {
		background-color: transparent;
		padding: 15rpx 20rpx;
		width: 100vw;
		box-sizing: border-box;
		position: fixed;
		z-index: 999;
	}
	.com-hedaer-fixed {
		background-color: white;
	}
</style>